import dash
from dash import dcc, html, callback_context
import plotly.express as px
import pandas as pd

# 读取数据
df = pd.read_csv('sales_data.csv')

# 获取唯一的产品列表
available_products = df['Product'].unique()

# 创建Dash应用
app = dash.Dash(__name__)

# 应用样式
app.layout = html.Div([
    html.H1("销售数据趋势", style={'textAlign': 'center'}),
    html.Div([
        html.Label("选择产品："),
        dcc.Dropdown(
            id='product-dropdown',
            options=[{'label': product, 'value': product} for product in available_products],
            value=available_products[0]
        )
    ], style={'width': '50%', 'margin': 'auto', 'textAlign': 'center'}),
    dcc.Graph(
        id='sales-trend',
        config={'displayModeBar': False}  # 禁用图表的模式栏
    )
], style={'padding': '20px'})

# 回调函数
@app.callback(
    dash.dependencies.Output('sales-trend', 'figure'),
    [dash.dependencies.Input('product-dropdown', 'value')]
)
def update_trend(selected_product):
    filtered_df = df[df['Product'] == selected_product]
    fig = px.line(filtered_df, x='Month', y='Sales', title=f'{selected_product}销售趋势')
    return fig

# 启动应用
if __name__ == '__main__':
    app.run_server(debug=True)
